
<!-- saved from url=(0089)http://localhost:58130/Center-testing/pwscanweb/Demo/boot%E8%BF%9B%E5%BA%A6%E6%9D%A1.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Bootstrap 实例 - 交替的进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
   <style type="text/css">
       #progr_bar_Mask{
           width: 100%;
           height: 100%;
           position: fixed;
           background-color: #F2F2F2;
           top: 0;
           left: 0;
           opacity:0.3;
           filter:alpha(opacity=30);
       }
      #progr_bar{
          width: 60%;
          position: fixed;
          top: 25%;
          left: 25%;
          z-index:2;
      }
   </style>
    <script type="text/javascript">
        $(function() {
            var int;
            var speedPro=2;
            $("#pri").click(function () {
                $("#progr_bar").css("display", "block");
                int=setInterval(clock,500)
            })
            clock=function () {
                if(speedPro>93){
                    clearInterval(int);
                    $("#ppp").css("width","100%");
                    $("#font").html("100%");
                }
                speedPro+=5;
                $("#ppp").css("width",speedPro+"%");
                $("#font").html(speedPro+"%")
            }
        })

    </script>
</head>
<body>
<button id="pri" value="点击显示进度条" style="z-index: 2">点击进度条开始</button>

<div class="progress progress-striped active" id="progr_bar" style="display: block;">
    <div id="ppp" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="2" aria-valuemax="100" style="width: 102%; min-width: 2em;">
        <span id="font">102%</span>
    </div>
</div>





</body></html>